<template>
  <el-drawer :with-header="false" :visible.sync="open_orderdetails" direction="rtl" size="50%"  @close="closeDrawer" >
    <!-- {{order}} -->
    <div class="mr20  mt40 ">
      <!-- 最上部分 -->
      <div class="classflex-space-between">
        <div class="classflex-left ml20">
          <div>
            {{order.orderStudentName}}
          </div>
          <div>
            ({{order.orderTime}}经办)


          </div>
        </div>
        <div class="mr30">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <div> <img :src="three" alt="logo"></div>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="退费退课">退费退课</el-dropdown-item>
              <el-dropdown-item command="取消订单">取消订单</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="classflex-left mt10 ml20">
        <div class="text-green text-size-40">
          {{order.state}}
        </div>
        <div class="mt10 ml20">

          剩余 {{order.residue}}课时
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="content ml20">
        <!-- <el-card class="item" v-for="item in list" :key="item"> -->
        <div class="item">
          <div class="text-gray text-size-14 ">订单总额(￥)</div>
          <div class=" text-black text-size-20 mt20 ">{{order.actualAmountReceived }}</div>

        </div>
        <div class="item">
          <div class="text-gray text-size-14 ">已确认收入(￥)</div>
          <div class=" text-black text-size-20 mt20 ">{{order.moneyDetermined ||'暂无'}}</div>

        </div>
        <div class="item">
          <div class="text-gray text-size-14 ">待确认收入(￥)</div>
          <div class=" text-black text-size-20 mt20 ">{{order.moneyUnconfirmed||'暂无' }}</div>

        </div>
        <div class="item">
          <div class="text-gray text-size-14 ">退款总额(￥)</div>
          <div class=" text-black text-size-20 mt20 ">{{order.moneyDroppedTotal ||'暂无'}}</div>

        </div>
      </div>
      <!-- 下面部分 -->
      <div class="ml20 mt20">
        <el-tabs v-model="activeName" @tab-click="tabschange">
          <el-tab-pane label="订单详情" name="订单详情"></el-tab-pane>
          <el-tab-pane label="上课记录" name="上课记录"></el-tab-pane>
          <el-tab-pane label="退课记录" name="退课记录"></el-tab-pane>

        </el-tabs>
        <div v-if="activeName=='订单详情'">
          <div class="classflex-space-between">
            <div class="ml20">
              {{ order.refundCourse}}

            </div>

            <div class="mr20">
              实收金额：￥ {{ order.actualAmountReceived}}
            </div>
          </div>
          <div>
            <el-descriptions class="margin-top" title=" " :column="3" :size="size" border>
              <!-- <template slot="extra">
                <el-button type="primary" size="small">操作</el-button>
              </template> -->
              <el-descriptions-item>
                <template slot="label">

                  报名学员
                </template>
                {{order.orderStudentName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">

                  购课类型
                </template>
                {{order.orderType}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">

                  购买课时数
                </template>
                {{order.orderCourseNumber}}课时
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">

                  赠送课时数
                </template>
                {{order.orderFreecourseNumber}}课时
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">

                  购课应收
                </template>
                ￥{{order.amountReceivable}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">

                  优惠金额
                </template>
                ￥{{order.discountAmount}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">

                  课时单价
                </template>
                ￥ {{order.unitPrice}}/课时
              </el-descriptions-item>
            </el-descriptions>
            <div class=" ">
              <div class="  mt20 mb10">
                其他收费项
              </div>
              <el-table :data="OtherData" style="width: 100%" border>
                <el-table-column prop="orderother" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="orderothernumber" label="数量" width="180">
                </el-table-column>
                <el-table-column prop="orderothermoney" label="价格">
                </el-table-column>
              </el-table>

            </div>
            <div class="  ">
              <div class="mt20 mb10">
                业绩分配信息
              </div>
              <el-table :data="SaleData" style="width: 100%" border>
                <el-table-column prop="user" label="用户" width="300px">
                </el-table-column>
                <el-table-column prop="usernumber" label="提成比例" width="300px">
                </el-table-column>

              </el-table>

            </div>
            <div class="  mb20">
              <div class="mt20 mb10">
                其他信息
              </div>
              <el-descriptions class="margin-top" title=" " :column="3" :size="size" border>

                <el-descriptions-item>
                  <template slot="label">

                    订单编号
                  </template>
                  {{order.orderId}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">

                    创建时间
                  </template>
                  {{order.createTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">

                    订单备注
                  </template>
                  {{order.orderRemark}}
                </el-descriptions-item>

              </el-descriptions>

            </div>
          </div>


        </div>
        <div v-else-if="activeName=='上课记录'">
          <el-table :data="orderdeductList" style="width: 100%" border>


            <el-table-column prop="classTime" label="上课日期" width="380">
            </el-table-column>
            <el-table-column prop="number" label="扣课数量">
            </el-table-column>
          </el-table>


        </div>
        <div v-else="activeName=='退课记录'">

          <div v-for="item in refundList" :key="item.id">


            <el-descriptions title="" direction="vertical" :column="5" border class="mt10">
              <el-descriptions-item label="退课数量">{{item.refundCourseNumber}}</el-descriptions-item>
              <el-descriptions-item label="应退金额">{{item.refundAmount}}</el-descriptions-item>
              <el-descriptions-item label="实退金额">{{item.refundAmountReality}}</el-descriptions-item>
              <el-descriptions-item label="盈亏">{{item.profitAndLoss}}</el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-tag size="small" @click="cancel(item.refundId)">撤销</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="操作时间">{{item.refundTime}}       备注：{{item.orderRemark}}</el-descriptions-item>
            </el-descriptions>

          </div>





        </div>

      </div>
      <add-refund-drawer class="" ref="AddRefundDrawer"  @addRefundDrawerSuccess="addRefundDrawerSuccess">

      </add-refund-drawer>


    </div>
  </el-drawer>
</template>

<script>
  import three from '@/assets/logo/three.png'
  import AddRefundDrawer from '@/components/AddRefundDrawer'
  import {
    listOrderdeduct,
    getOrderdeduct,
    delOrderdeduct,
    addOrderdeduct,
    updateOrderdeduct
  } from "@/api/orderdeduct/orderdeduct";
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder
  } from "@/api/order/order";
  import {
    listRefund,
    getRefund,
    delRefund,
    addRefund,
    updateRefund
  } from "@/api/refund/refund";
  export default {
    name: "Course",
    dicts: ['course_teaching_mode', 'course_state', 'course_subject'],
    components: {
      AddRefundDrawer
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],

        three: three,
        OtherData: [],
        SaleData: [],
        // 遮罩层
        loading: true,
        refundList: [],
        size: '',
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程管理表格数据
        courseList: [],
        activeName: "订单详情",
        // 是否显示弹出层
        open_orderdetails: false,
        // 查询参数
        queryParamsOrderDetails: {
          pageNum: 1,
          pageSize: 10,
          orderStudentName: null,
          orderCourse: null,
          orderTime: null,
          orderType: null,
          orderCourseNumber: null,
          orderFreecourseNumber: null,
          orderCourseEndtime: null,
          amountReceivable: null,
          discountAmount: null,
          actualAmountReceived: null,
          totalClassHours: null,
          consumed: null,
          residue: null,
          orderRemark: null,
          orderRemark2: null,
          orderRemark3: null,
          orderRemark4: null,
          orderRemark5: null,
          orderRemark6: null,
          orderRemark7: null,
          orderRemark8: null,
          orderRemark9: null,
          orderRemark10: null,
          moneyDetermined: null,
          moneyUnconfirmed: null,
          droppedClassesNumber: null,
          moneyDroppedTotal: null,
          otherJson: null,
          moneyOtherTotal: null,
          moneyOrderTotal: null,
          profitAndLoss: null,
          unitPrice: null,
          unit: null,
          state: null,
          saleName: null,
          deptId: null,
          studentId: null,
          saleId: null,
        },
        // 弹出层标题
        title: "",
        order: {},
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        RefundParams: {},
        queryOrderdeductParams: {},
        orderdeductList: [],
        listrefund: [{
          id: "11"

        }, {
          id: "22"

        }]

      };
    },
    created() {


    },
    methods: {
      closeDrawer() {
        console.log("关闭事件");
        this.$emit('addClassrecords', 'addClassrecords'); // 触发名为'childEvent'的自定义事件，并传递数据
      },
      addRefundDrawerSuccess(){
         this.getOrderDetails();
      },
      /** 查询订单消费列表 */
      getOrderdeductList() {
        this.queryOrderdeductParams.orderId = this.order.orderId;
        listOrderdeduct(this.queryOrderdeductParams).then(response => {
          this.orderdeductList = response.rows;

        });
      },

      /** 查询退费列表 */
      getlistRefund() {
        this.RefundParams.orderId = this.order.orderId;
        listRefund(this.RefundParams).then(response => {
          this.refundList = response.rows;

        });
      },

      openMessageBox(refundIds) {

        this.$modal.confirm('撤销后可能影响课消数据，是否确定撤销?').then(function() {
            return delRefund(refundIds);
        }).then(() => {
            this.getOrderDetails();
          this.$modal.msgSuccess("撤销成功");
        }).catch(() => {});


      },
      openMessageBox2() {
        var  that=this;
        console.log(this.order.orderId);


          this.$modal.confirm('取消订单可能带来课消统计数据变化且无法恢复，请谨慎操作!').then(function() {
            return delOrder( that.order.orderId);
          }).then(() => {

            this.open_orderdetails = false;
            this.$emit('delOrderSuccess', 'addsuccess'); // 触发名为'childEvent'的自定义事件，并传递数据
            this.$modal.msgSuccess("删除成功");
          }).catch((e) => {
             console.log(e);

          });





      },
      cancel(id) {

        this.openMessageBox(id);

      },

      handleCommand(e) {
        if (e == "退费退课") {

          this.$refs.AddRefundDrawer.openaddrefund(this.order.orderId);

        } else if (e == "取消订单") {

          this.openMessageBox2();
        }

      },

      tabschange() {

      },
      orderdetailsopen(id) {
        this.orderid = id;
        this.open_orderdetails = true;
        this.getOrderDetails();
      },

      /** 查询订单详情 */
      getOrderDetails() {
        // this.loading = true;
        getOrder(this.orderid).then(response => {
          // console.log(response)
          this.order = response.data;


          var oherjson = this.order.otherJson;
          var salejson = this.order.saleJson;
          // console.log(oherjson)

          this.OtherData = JSON.parse(oherjson);
          this.SaleData = JSON.parse(salejson);
          this.getOrderdeductList();
           this.getlistRefund();
          // this.total = response.total;
          // this.loading = false;
        });
      },







    }
  };
</script>

<style>
  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;

  }



  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;

  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/5);
    height: 50px;
    /* align-items: center;
    justify-content: center; */
    margin: 0 5px 5px 0;
  }




  .xian {
    border-left: 2px solid #f3f6ff;
  }
</style>
